import React, { Component } from 'react'
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  ImageBackground,
} from 'react-native'

import PropTypes from 'prop-types'
import FormStyle from './config/FormStyle'
import FormItemHOC from './core/FormItemHOC'

class RXFormCheckBoxItem extends Component {
  constructor(props) {
    super(props)
    props.data && props.onChange && props.onChange(props.data)
    props.data && props.selectedItem && props.selectedItem(props.data)
    this.state = {
      data: props.data,
    }
  }

  static propTypes = {
    data: PropTypes.array,
    title: PropTypes.string,
    onChange: PropTypes.func,
    selectedItem: PropTypes.func,
    isTitleMarginTop: PropTypes.bool,
    isMust: PropTypes.bool,
    isMultiSelect: PropTypes.bool,
  }

  static defaultProps = {
    data: [],
    formItemType: 'checkBox',
    isTitleMarginTop: true,
    isMust: true,
    isMultiSelect: false,
  }

  singleCheck(selectIndex) {
    const lastData = this.state.data
    if (!lastData || !Array.isArray(lastData)) return
    const data = []
    for (let i = 0; i < lastData.length; i++) {
      const item = lastData[i] || {}
      if (i !== selectIndex) {
        item.isChecked = false
      } else {
        item.isChecked = true
      }
      data.push(item)
    }
    this.setState({ data })
    this.props.onChange && this.props.onChange(data)
    this.props.selectedItem && this.props.selectedItem(data)
  }

  renderItem = (item, index) => {
    const { isMultiSelect } = this.props
    const borderRadius = isMultiSelect ? 4 : 27 / 2
    const icon = isMultiSelect
      ? FormStyle.CheckBoxSelIcon
      : FormStyle.CheckBoxSelIcon1
    return (
      <TouchableOpacity
        key={'form-check-box-item-' + index}
        activeOpacity={0.5}
        onPress={() => {
          if (isMultiSelect) {
            item.isChecked = !item.isChecked
            const data = this.state.data
            data[index] = item

            this.setState({ data })
            this.props.onChange && this.props.onChange(data)
            this.props.selectedItem && this.props.selectedItem(data)
          } else {
            this.singleCheck(index)
          }
        }}
      >
        <ImageBackground
          source={item.isChecked ? icon : {}}
          resizeMode='stretch'
          style={[
            styles.itemView,
            item.isChecked ? styles.selectItemView : styles.defaultItemView,
            { borderRadius: borderRadius },
          ]}
        >
          <Text
            style={
              item.isChecked ? styles.selectItemText : styles.defaultItemText
            }
          >
            {item.title}
          </Text>
        </ImageBackground>
      </TouchableOpacity>
    )
  }

  renderAllItem = () => {
    const { data } = this.state
    if (data && Array.isArray(data)) {
      const arrUI = []
      for (let i = 0; i < data.length; i++) {
        const item = data[i] || {}
        arrUI.push(this.renderItem(item, i))
      }
      return arrUI
    } else {
      return null
    }
  }

  render() {
    const { title, isTitleMarginTop, isMust } = this.props
    const marginTop = isTitleMarginTop ? 8 : 0
    const marginLeft = isMust ? 13 : 20
    return (
      <View style={styles.container}>
        <View
          style={[
            styles.titleView,
            { marginTop: marginTop, marginLeft: marginLeft },
          ]}
        >
          {isMust ? <Text style={styles.must}>*</Text> : null}
          <Text style={styles.title}>{title}</Text>
        </View>
        <View style={styles.itemsView}>{this.renderAllItem()}</View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: FormStyle.textWhite,
  },
  titleView: {
    flexDirection: 'row',
  },
  must: {
    marginTop: 2,
    fontSize: 14,
    fontFamily: FormStyle.textFontFamily,
    color: FormStyle.textMustColor,
  },
  title: {
    fontSize: 14,
    fontFamily: FormStyle.textFontFamily,
    color: FormStyle.textBlack,
  },
  itemsView: {
    marginTop: 12,
    flexDirection: 'row',
    flexWrap: 'wrap',
    alignItems: 'center',
  },
  itemView: {
    marginBottom: 16,
    paddingHorizontal: 14,
    backgroundColor: FormStyle.textWhite,
    alignItems: 'center',
    justifyContent: 'center',
    marginLeft: 20,
    minWidth: 54,
    height: 27,
  },
  selectItemView: {
    borderWidth: 1,
    borderColor: FormStyle.textWhite,
  },
  defaultItemView: {
    borderWidth: 1,
    borderColor: FormStyle.lineColor,
  },
  defaultItemText: {
    fontSize: 13,
    fontFamily: FormStyle.textFontFamily,
    color: FormStyle.TextLightGray,
  },
  selectItemText: {
    fontSize: 13,
    fontFamily: FormStyle.textFontFamily,
    color: FormStyle.textWhite,
  },
})
export default FormItemHOC(RXFormCheckBoxItem)
